import {
  Form,
  Input,
  InputNumber,
  Switch,
  Upload,
  Button
} from 'antd'
import React, { useEffect } from 'react'
import SelectCateGood from './components/SelectCateGood'
import Uploadimg from './components/Uploadimg'

import {useParams} from 'react-router-dom'
import { useAppDispatch,useAppSelector } from "@/hooks"
import {getgoodupload,getgooddestail} from '@/store/actions'



import './style.scss'

const { TextArea } = Input

const formItemLayout = {
  labelCol: {
    sm: { span: 3 },
  },
  wrapperCol: {
    sm: { span: 12 },
  },
};
const tailFormItemLayout = {
  wrapperCol: {
    sm: {
      span: 3,
      offset: 3,
    },
  },
};

export default (props)=>{


  
  let id = useParams().id
  let num = useAppSelector(store=>store.good.num)
  let info = useAppSelector(store=>store.good.info)
  console.log('info',info);
  

  const dispatch = useAppDispatch()

  const [form] = Form.useForm()
  // 提交
  const onFinish = values => {
    console.log(values);
    if(id) values.id = id
    dispatch(getgoodupload(values))
  }
  useEffect(()=>{
    if(num!==0){
        props.history.goBack()
    }

  },[num])

  useEffect(()=>{
    if(id){
      dispatch(getgooddestail({id}))
    }

  },[])
  useEffect(()=>{
    if(id&&info.name){
      form.setFieldsValue(info)
    }

  },[info])

  // 设置num
  


  return (
    <div className='qf-good-info'>
      <h1 style={{textAlign:'center',color:'red'}}>
          {
            id?"商品编辑"
            :'商品新增'
          }
      </h1>

      <Form
        {...formItemLayout}
        form={form}
        onFinish={onFinish}
        scrollToFirstError
      >
        <Form.Item
          name="name"
          label="商品名称"
          rules={[
            { required: true, message: '请输入商品名称' }
          ]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          name="desc"
          label="描述"
          rules={[]}
        >
          <TextArea rows={4} />
        </Form.Item>

        <Form.Item
          name="price"
          label="商品价格"
        >
          <InputNumber min={0} />
        </Form.Item>

        <Form.Item
          name="cate"
          label="商品品类"
        >
          <SelectCateGood />
        </Form.Item>

        <Form.Item
          name="hot"
          label="是否热销"
          valuePropName='checked'

        >
          <Switch />
        </Form.Item>

        <Form.Item
          name="img"
          label="商品图片"
        >
          <Uploadimg/>
        </Form.Item>

        <Form.Item {...tailFormItemLayout}>
          <Button type="primary" htmlType="submit">
            {id?'立即修改':'立即添加'}
          </Button>
        </Form.Item>
      </Form>
    </div>
  )
}
